Passa al contenuto principale
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

Gestione dei Modelli di Visualizzazione Pubblica

I modelli di visualizzazione pubblica sono la base delle tue visualizzazioni personalizzate. Definiscono il layout, la struttura e gli elementi visivi che saranno applicati alle tue installazioni. Questa guida completa copre tutto, dalla creazione di modelli di base a tecniche di design avanzate.

📋 Panoramica​

Cosa sono i Modelli di Visualizzazione Pubblica?​

I modelli servono come prototipi riutilizzabili che:

  • 📐 Definiscono layout visivi per le tue visualizzazioni pubbliche
  • 🧩 Organizzano i blocchi di contenuto e il loro posizionamento
  • 🎨 Stabiliscano coerenza di design tra più installazioni
  • ⚙️ Consentono implementazioni rapide di visualizzazioni standardizzate
  • 🔄 Supportano aggiornamenti facili su tutte le configurazioni collegate

Vantaggi Chiave​

VantaggioDescrizione
🚀 EfficienzaCrea una volta, usa in più installazioni
🎯 CoerenzaMantieni standard di design uniformi
🔧 FlessibilitàModifica facilmente senza ricreare da zero

🚀 Iniziare​

Flusso di Lavoro del Modello​

  1. 📐 Progetta il Layout - Pianifica la tua struttura visiva
  2. 🎨 Crea il Modello - Costruisci utilizzando l'editor di modelli
  3. 💾 Salva il Modello - Memorizza per riutilizzo tra le installazioni

Prerequisiti​

Prima di creare modelli, assicurati di avere:

  • ✅ Account SmartgridX con le autorizzazioni appropriate
  • ✅ Obiettivi di design chiari per la tua visualizzazione
  • ✅ Requisiti di contenuto (immagini, punti dati, layout)

🎛️ Interfaccia di Gestione dei Modelli​

Accesso al Manager dei Modelli​

infographicimage

Passaggi di navigazione:

  1. Accedi al tuo account SmartgridX
  2. Naviga a 'Visualizzazioni Pubbliche' nella barra laterale principale
  3. Clicca sul pulsante 'Modello di Visualizzazione Pubblica' nella pagina di panoramica

Si apre l'interfaccia di gestione dei modelli dove puoi visualizzare, creare, modificare ed eliminare modelli.

Tabella di Panoramica dei Modelli​

infographicimage

Azioni disponibili:

  • ➕ Aggiungi - Pulsante verde per iniziare la creazione di un modello
  • ✏️ Modifica - Modifica il design del modello esistente
  • 🗑️ Elimina - Rimuovi il modello non utilizzato

🎨 Processo di Creazione del Modello​

Iniziare un Nuovo Modello​

Clicca sul pulsante "Crea Nuovo Modello" per aprire l'interfaccia dell'editor di modelli.

Configurazione dell'Intestazione del Modello​

infographicimage

Impostazioni del Titolo​

Titolo del Modello:

  • Scopo: Identifica il modello nelle liste e nelle configurazioni
  • Migliori pratiche: Usa nomi descrittivi e specifici per il progetto
  • Esempi: "Dashboard-KPI-Fabbrica", "Layout-Monitoraggio-Energia", "Visualizzazione-Multi-Zona"

Configurazione dei Margini​

Le impostazioni dei margini definiscono l'area sicura dai bordi della visualizzazione:

Slider dei Margini (0-100px):

  • 📐 Intervallo: 0 a 100 pixel dal bordo della visualizzazione
  • 🎯 Scopo: Crea spaziatura sicura per prevenire il taglio del contenuto
  • 📱 Applicazione: Garantisce visibilità su vari tipi di visualizzazione
  • ⚙️ Raccomandazione: Usa 10-20px per visualizzazioni standard, 30-50px per schermi edge-to-edge

Impatto visivo:

  • 0px di margine - Il contenuto si estende ai bordi della visualizzazione
  • 50px di margine - Il contenuto inizia a 50 pixel da tutti i bordi
  • 100px di margine - Area massima sicura con ampia spaziatura dei bordi

Funzione di Salvataggio​

Il pulsante 💾 Salva (angolo in alto a destra) consente di salvare il modello corrente.

🧩 Sistema di Layout dei Blocchi​

Comprendere il Sistema a Griglia​

infographicimage

Fondamenti della Griglia​

L'editor dei modelli utilizza un sistema a griglia basato su percentuale 100×100:

Proprietà della Griglia:

  • 📐 Dimensioni: 100 unità di larghezza × 100 unità di altezza
  • 📊 Unità: Valori percentuali (1 unità = 1% della dimensione totale)
  • 🎯 Precisione: Consente posizionamento e dimensionamento esatti
  • 📱 Reattivo: Si adatta automaticamente a diverse dimensioni dello schermo

Esempi di Layout dei Blocchi​

Configurazione: 100 larghezza × 100 altezza
Risultato: Copertura a schermo intero
Caso d'uso: Visualizzazione singola grande, immagine a schermo intero

┌─────────────────────────────────┐
│                                 │
│         BLOCCO COMPLETO         │
│                                 │
│                                 │
└─────────────────────────────────┘

Manipolazione dei Blocchi​

Aggiunta di Blocchi​

Metodo: Clicca sul pulsante "Aggiungi Blocco" (in alto a destra dell'editor)
Risultato: Nuovo blocco appare con dimensioni predefinite
Prossimi passi: Posiziona e ridimensiona secondo necessità

Posizionamento dei Blocchi​

Trascina e Rilascia:

  • 🖱️ Clicca e tieni premuto su qualsiasi blocco per spostarlo
  • 📍 Anteprima in tempo reale mostra la posizione durante il trascinamento
  • 🧲 Aggancio alla griglia aiuta con l'allineamento preciso
  • 👁️ Guide visive appaiono per assistere con l'allineamento

Ridimensionamento dei Blocchi​

Maniglia di Ridimensionamento:

  • 📐 Angolo in basso a destra mostra la maniglia di ridimensionamento quando il blocco è selezionato
  • 🔧 Trascina per ridimensionare sia la larghezza che l'altezza simultaneamente
  • 📊 Valori in tempo reale mostrano le dimensioni correnti

Controlli di Precisione​

infographicimage

Pannello di Posizionamento sul Lato Destro​

Quando un blocco è selezionato, il pannello a destra fornisce:

Controlli di Posizione:

  • 📍 Posizione X - Offset orizzontale dal bordo sinistro (0-100)
  • 📍 Posizione Y - Offset verticale dal bordo superiore (0-100)
  • 🎨 Indice Z - Ordinamento dei livelli per blocchi sovrapposti
  • 📏 Larghezza - Percentuale di larghezza del blocco (1-100)
  • 📏 Altezza - Percentuale di altezza del blocco (1-100)

⚙️ Configurazione dei Blocchi​

Tipi e Proprietà dei Blocchi​

infographicimage

Accesso alla Configurazione del Blocco​

Metodo:

  1. Seleziona un blocco nel canvas dell'editor
  2. Il pannello di configurazione appare in fondo allo schermo
  3. Il menu a discesa del tipo di blocco è l'opzione di configurazione principale

Nota: Non tutti i blocchi sono attualmente configurabili. Questo cambierà mentre lo sviluppo continua. Maggiori tipi di blocco saranno aggiunti negli aggiornamenti futuri.

Tipi di Blocchi Disponibili​

Scopo: Visualizzare immagini statiche, loghi, sfondi, GIF Opzioni di configurazione:

  • 📁 Sorgente dell'immagine - Carica o URL che sarà utilizzato come predefinito per questo blocco. Puoi lasciare questo vuoto se desideri forzare la selezione di un'immagine nella configurazione

Casi d'uso:

  • Loghi aziendali e branding
  • Immagini di sfondo
  • Foto di attrezzature
  • GIF

Esempi di Modello​

immagine infografica

Questo esempio dimostra un modello ben strutturato con:

  • 📊 Chiara organizzazione dei blocchi con etichette descrittive
  • 📐 Spaziatura e allineamento appropriati
  • 🎯 Tipi di blocco funzionali per diverse esigenze di contenuto

Nomenclatura dei blocchi in questo esempio:

  • Ogni blocco mostra il suo scopo previsto
  • Etichettatura chiara aiuta con la configurazione
  • Organizzazione logica supporta la manutenzione

📚 Documentazione Correlata​

Prossimi Passi​

Dopo aver creato il tuo modello:

  1. ⚙️ Configura Installazioni - Applica modelli a installazioni specifiche
  2. 🎛️ Collega Controller - Collega per visualizzare l'hardware
  3. 🚀 Guida per Iniziare - Panoramica completa del flusso di lavoro

Argomenti Avanzati​

  • 🎨 Tecniche di Design Avanzate
  • 📊 Integrazione Dati Personalizzati
  • 🔄 Aggiornamenti Automatici del Modello
  • 👥 Collaborazione Multiuente sui Modelli

💡 Riepilogo delle Migliori Pratiche​

Design del Modello​

✅ Principi di design:

  • 🎯 Mantienilo semplice - Concentrati sulle informazioni essenziali
  • 📱 Progetta in modo responsivo - Testa su diverse dimensioni di schermo
  • 🎨 Mantieni la coerenza - Usa colori e layout standardizzati

Gestione del Modello​

✅ Suggerimenti di organizzazione:

  • 📝 Usa nomi descrittivi - Rendi i modelli facili da trovare
  • 🔄 Manutenzione regolare - Rimuovi i modelli non utilizzati
  • 👥 Condividi standard - Garantire coerenza nel team

🎨 Pronto a Progettare? Con il tuo modello creato e configurato, sei pronto a distribuire visualizzazioni straordinarie nelle tue installazioni SmartgridX!